<template>
    <div
        class="callSummaryReport"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <el-form
            class="searchForm"
            ref="searchForm"
            label-position="right"
            size="small"
            label-width="120px"
            :model="formData"
            :rules="rules"
        >
            <el-row>
                <el-col :span="8">
                    <el-form-item label-position="left" prop="callDtStart" label="起始日期:">
                        <el-date-picker
                            v-model="formData.callDtStart"
                            type="datetime"
                            placeholder="请选择起始日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            format="yyyy-MM-dd HH:mm:ss"
                        >
                            <!--:picker-options="startOptions"-->
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="callDtEnd" label-position="left" label="结束日期:">
                        <el-date-picker
                            v-model="formData.callDtEnd"
                            type="datetime"
                            placeholder="请选择结束日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            format="yyyy-MM-dd HH:mm:ss"
                        >
                            <!--:picker-options="endtOptions"-->
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <!-- 按钮 -->
                    <el-button type="primary" size="small" @click="handleSearch">查 询</el-button>
                    <el-button type="primary" size="small" @click="handleReset">重 置</el-button>
                    <el-button type="primary" size="small" @click="handleExport">导 出</el-button>
                </el-col>
            </el-row>
        </el-form>

        <!-- 表格数据展示模块 -->
        <!-- <div class="typeTitle">大类来电原因</div> -->
        <el-table
            stripe
            class="heard-bg"
            :data="bigTableData"
            border
            max-height="700"
            v-if="disabled"
        >
            <el-table-column
                v-for="(item, index) in tableBigColumn"
                :key="index"
                :label="item.label"
            >
                <template slot-scope="scope">
                    <span v-if="item.value === 'bigPer'">{{ scope.row[item.value] + '%' }}</span>
                    <span v-else-if="item.value === 'smallPer'">{{ scope.row[item.value] + '%' }}</span>
                    <span v-else>{{scope.row[item.value]}}</span>
                </template>
            </el-table-column>
        </el-table>
        <!-- <div class="typeTitle">小类来电原因</div>
        <el-table
            stripe class="heard-bg"
            :data="smallTableData"
            border
        >
            <el-table-column
                v-for="(item, index) in tablesmallColumn"
                :key="index"
                :label="item.label"
            >
                <template
                    slot-scope="scope"
                >
                    <span v-if="item.value === 'operate'">
                        <el-button type="text">详情</el-button>
                    </span>
                    <span v-else>{{scope.row[item.value]}}</span>

                </template>
            </el-table-column>
        </el-table>-->
        <!-- <Pagination
            :hanleChangeCurrentPage="hanleChangeCurrentPage"
            :handleChangeSize="handleChangeSize"
            :total="total"
            :pageSize="pageSize"
            :currentPage="currentPage"
        />-->
    </div>
</template>
<script>
import { mapState } from 'vuex';
import moment from 'moment';
import request from '@/apis/request';
import { eachProp } from '@/utils/Object';
import { isNull } from '@/utils/Common';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import Pagination from '@/components/Pagination/Pagination.vue';
import { getToken, getTokenHsbankNo } from '@/utils/auth';

export default {
    name: 'callSummaryReport',
    components: {
        cardComponent,
        Pagination,
    },
    data() {
        return {
            pageLoading: false, // 页面loading
            formData: {
                callDtStart: '', // 申请起始日期
                callDtEnd: '', // 申请截止日期
            },
            disabled: false,
            // 大类表格数据
            bigTableData: [],
            // smallTableData: [],//小类表格数据
            // 表格项
            tableBigColumn: [
                {
                    label: '大类来电原因',
                    value: 'bigTypeName',
                },
                {
                    label: '大类来电数量',
                    value: 'bigCount',
                },
                {
                    label: '大类业务占比',
                    value: 'bigPer',
                },
                {
                    label: '小类来电原因',
                    value: 'smallTypeName',
                },
                {
                    label: '小类来电数量',
                    value: 'smallCount',
                },
                {
                    label: '小类业务占比',
                    value: 'smallPer',
                },
            ],
            tablesmallColumn: [
                // {
                //     label: '小类来电原因',
                //     value: 'custid'
                // },
                // {
                //     label: '小类来电数量',
                //     value: 'custno'
                // },
                // {
                //     label: '小类业务占比',
                //     value: 'planno'
                // }
            ],
            // total: 0, // 总数
            pageSize: 10, // 每页条数
            currentPage: 1, // 当前页码
            // 开始日期选择 限制
            // startOptions: {
            //     disabledDate: time => {
            //         const start =new Date();
            //         let cutTime = start.setTime(start.getTime())
            //         const startDate = start.setTime(start.getTime() - 3600 * 1000 * 24 * 93)
            //         if(this.formData.callDtEnd) {
            //             return time.getTime() > new Date(moment(this.formData.callDtEnd).format('YYYY-MM-DD HH:mm:ss')).getTime() || time.getTime() < startDate || time.getTime() > cutTime
            //         }else{
            //             return time.getTime() < startDate || time.getTime() > cutTime
            //         }
            //         // if(this.formData.callDtEnd) {
            //         //     return time.getTime() > new Date(moment(this.formData.callDtEnd).format('YYYY-MM-DD HH:mm:ss')).getTime()
            //         // }
            //     }
            // },

            // 结束日期选择限制
            // endtOptions: {
            //     disabledDate: time => {
            //          const end =new Date();
            //         let cutTime = end.setTime(end.getTime())
            //         const endDate = end.setTime(end.getTime() - 3600 * 1000 * 24 * 93)
            //         if(this.formData.callDtStart) {
            //             return time.getTime() < new Date(moment(this.formData.callDtStart).format('YYYY-MM-DD HH:mm:ss')).getTime() || time.getTime() < endDate || time.getTime() > cutTime
            //         }else{
            //             return time.getTime() < endDate || time.getTime() > cutTime
            //         }
            //         // if(this.formData.callDtStart) {
            //         //     return time.getTime() < new Date(moment(this.formData.callDtStart).format('YYYY-MM-DD')).getTime()
            //         // }
            //     }
            // },

            rules: {
                callDtStart: [
                    { required: true, message: '请选择起始日期', trigger: 'blur' },
                ],
                callDtEnd: [
                    { required: true, message: '请选择截止日期', trigger: 'blur' },
                ],
            },
        };
    },

    mounted() {
        // this.handleSearch()
    },

    methods: {
        // 初始化列表查询
        handleSearch() {
            this.$refs.searchForm.validate((valid) => {
                if (valid) {
                    this.pageLoading = true;
                    const params = {
                        ...this.formData,
                        bankNum: getTokenHsbankNo('HsbankNo'), // 银行号

                    };
                    this.$post.callSummary.reasonStatis(params).then((res) => {
                        console.log(res);
                        this.pageLoading = false;
                        if (res.status === 200) {
                            this.disabled = true;
                            this.bigTableData = res.data.content.smallType;
                            // this.total = res.data.content.page.total
                        } else {
                            this.$alert(
                                '请求失败！',
                                '提示',
                                {
                                    customClass: 'error', type: 'error',
                                },
                            );
                        }
                    });
                } else {

                }
            });
        },

        // 点击导出 -> 导出流水记录表格
        handleExport() {
            this.$refs.searchForm.validate((valid) => {
                if (!valid) return;
                const data = {
                    ...this.formData,
                    bankNum: getTokenHsbankNo('HsbankNo'), // 银行号
                };
                let url = '/iccsrv/call/reason/download?';
                eachProp(data, (prop) => {
                    if (!isNull(data[prop])) {
                        url += `${prop}=${data[prop].toString()}&`;
                    }
                });
                url = url.substring(0, url.length - 1);
                request({
                    url,
                    method: 'get',
                    responseType: 'blob',
                }).then((res) => {
                    // console.log(res, '相应报文')
                    const blobUrl = window.URL.createObjectURL(new Blob([res.data]));
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.download = `callSummaryReport${new Date().getTime()}.xls`;
                    a.href = blobUrl;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                });
            });
        },

        // 点击重置搜索表单
        handleReset() {
            this.$refs.searchForm.resetFields();
        },

        // 切换分页大小
        handleChangeSize(val) {
            this.pageSize = val;
            // 重置页码
            this.currentPage = 1;
            this.getInitData();
        },

        // 切换页码
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.getInitData();
        },
    },
};
</script>
<style lang="scss" scoped>
.callSummaryReport {
    min-height: 100%;
    background-color: #fff;
    // border-radius: 8px;
    overflow: hidden;
    padding: 20px;
    .searchForm {
        margin-bottom: 20px;
        .el-row {
            text-align: left;
        }

        .buttonBox {
            text-align: right;
        }
    }
    .typeTitle {
        width: 100%;
        height: 45px;
        line-height: 45px;
        font-size: 18px;
        font-weight: 500;
        color: #409eff;
    }
}
</style>
